<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<%@include file="../../WEB-INF/jspf/admin.jspf" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head id="headx">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <link href="../../jq/redmond/jquery-ui-1.10.3.custom.min.css" type="text/css" rel="stylesheet"/>
        <link href="../../css/main.css" type="text/css" rel="stylesheet"/>
        <link href="../../jq/menu/menu.css" type="text/css" rel="stylesheet"/>
        <link href="../../jq/menu/submenu.css" type="text/css" rel="stylesheet"/>

        <link href="../../parainfo/form/form.css" type="text/css" rel="stylesheet"/>
        <link href="../../parainfo/table/table.css" type="text/css" rel="stylesheet"/>

        <script src="../../jq/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="../../jq/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
        <script src="../../jq/i18n/jquery.ui.datepicker-es.min.js" type="text/javascript"></script>
        <script src="../../jq/timepicker/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
        <script src="../../jq/menu/menu.js" type="text/javascript"></script>
        <script src="../../jq/menu/submenu.js" type="text/javascript"></script>

        <script src="../../parainfo/form/form.js" type="text/javascript"></script>
        <script src="../../parainfo/table/table.js" type="text/javascript"></script>
        <script src="js/ausentismo_mas.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="ctop">
            <%@include file="../../WEB-INF/jspf/top.jspf" %>
        </div>

        <div id="m_menu">
            <%@include file="../../WEB-INF/jspf/menu.jspf" %>
        </div>

        <div id="cmenu2">
            <%@include file="../../WEB-INF/jspf/submenu.jspf" %>
        </div>

        <div id="cdata">
            <h2 style="text-align: center;margin-bottom: 20px;color: #3fa7c5">Listado de Trabajadores - Solicitud de Ausentismo</h2>

            <form class="parainfo" action="#" style="margin: auto;display: table">
                <fieldset>
                    <legend>Filtro de Búsqueda</legend>

                    <table style="margin: auto">
                        <tr>

                            <td style="padding-left: 40px">
                                <table>
                                    <tr>
                                        <td>Año</td>
                                        <td>
                                            <select id="annio" onchange="jsannio();" style="width: 320px">
                                                <option value="0">Seleccione...</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Unid. Ejecutora</td>
                                        <td>
                                            <select id="uejecutora" onchange="jsuejecutora();" style="width: 320px">
                                                <option value="0">Seleccione...</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Corte</td>
                                        <td>
                                            <select id="ctlcorte" onchange="jscorte();" style="width: 320px">
                                                <option value="0">Seleccione...</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Dependencia</td>
                                        <td>

                                            <select id="dependencia" onchange="jsdependencia();" style="width: 320px">
                                                <option value="0">Seleccione...</option>
                                            </select>


                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Área Física</td>
                                        <td>
                                            <select id="area" onchange="jsarea();" style="width: 320px">
                                                <option value="0">Todos</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Sede</td>
                                        <td>
                                            <select id="sede" onchange="jssede();" style="width: 320px">
                                                <option value="0">Seleccione...</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr> 
                                        <td>Género</td>
                                        <td>
                                            <select id="genero"  style="width: 320px">
                                                <option value="0">Seleccione...</option>
                                            </select>
                                        </td>
                                    </tr>

                                </table>
                            </td>
                            <td>
                                <table>
                                    <tr>
                                        <td>Nro.&nbsp;Documento</td>
                                        <td>
                                            <input type="text" id="numdoc" 
                                                   maxlength="15" style="width: 100px"/>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Apellido&nbsp;Paterno</td>
                                        <td colspan="2">
                                            <input type="text" id="appaterno" 
                                                   maxlength="200" style="width: 200px"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Apellido&nbsp;Materno</td>
                                        <td colspan="2">
                                            <input type="text" id="apmaterno" 
                                                   maxlength="200" style="width: 200px"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Nombres</td>
                                        <td colspan="2">
                                            <input type="text" id="nombres" 
                                                   maxlength="200" style="width: 200px"/>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>Reg. Lab.</td>
                                        <td>
                                            <select id="reglab" onchange="jsregimen();" style="width: 320px">
                                                <option value="0">Seleccione...</option>
                                            </select>
                                        </td>
                                    </tr>

                                    <tr> 
                                        <td>Estado</td>
                                        <td>
                                            <select id="estadotrab"  style="width: 320px">
                                                <option value="0">Seleccione...</option>
                                            </select>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <th colspan="2" style="text-align: center;padding-top: 10px">
                                <input type="button" onclick="jsQry();"
                                       value="Buscar"/>
                            </th>
                        </tr>
                    </table>
                </fieldset>
            </form>

            <table style="margin: auto;margin-top: 30px;margin-bottom: 30px">
                <tr>
                    <td style="vertical-align: top">
                        <table class="parainfo" style="width: 700px">
                            <thead>
                                <tr>
                                    <td>&nbsp;</td>
                                    <td><input type="checkbox" name="all" id="all"
                                               style="text-align: center" onclick="checkAll();" /></td>
                                    <td>&nbsp;</td>
                                    <td>Trabajador</td>
                                    <td>Documento</td>
                                    <td>Dependencia</td>
                                    <td>Área Física</td>
                                    <td>Estado</td>
                                </tr>
                            </thead>

                            <tbody id="qbody">
                                <tr>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>

                    <td style="vertical-align: top">
                        <table class="crud">
                            <tr>
                                <td>
                                    <a href="#" onclick="jsSol();" title="Registrar Asistencia Masiva">
                                        <img src="../../images/asigna.png"/></a>
                                </td>
                                <td>
                                    <a href="#" onclick="jsCon();" title="Lista de Solicitudes de Ausentismo ">
                                        <img src="../../images/find2.png"/></a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

            <%-- registrar marcación de asistencia masiva  --%>
            <div style="display: none">

                <div id="dsol" title="Registro masivo de solicitud de ausentismo">

                    <table >

                        <tr>
                            <td>Concepto&nbsp;Ausentismo</td>
                            <td>
                                <select id="concepto_sol" onchange="jsConceptoAus();" style="width: 304px">
                                    <option value="0">Seleccione...</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>Tipo/Modalidad/Unidad</td>
                            <td>
                                <input type="text" id="tipomoda_sol" readonly="readonly" 
                                       style="width: 300px"/>
                            </td>
                        </tr>
                        <tr>
                            <td>Fecha&nbsp;Ausentismo</td>
                            <td>
                                <input type="text" id="fecha_sol" readonly="readonly" 
                                       style="width: 100px;margin-right:4px"/>
                            </td>
                        </tr>
                        <tr>
                            <td>Hora&nbsp;Inicio&nbsp;/&nbsp;Fin</td>
                            <td>
                                <input type="text" id="hora_ini_sol" readonly="readonly" 
                                       style="width: 80px;margin-right:4px"/>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <input type="text" id="hora_fin_sol" readonly="readonly" 
                                       style="width: 80px;margin-right:4px"/>
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align: top">Observación</td>
                            <td>
                                <textarea id="observacion_sol" maxlength="250"
                                          style="width: 300px;height: 40px;resize: none"></textarea>
                            </td>
                        </tr>
                    </table>
                    <br/>
                    <table style="border-collapse: collapse">
                        <thead class="ui-widget-header">
                            <tr>
                                <td style="width: 270px;border: 1px solid #ddd">Trabajador</td>
                                <td style="width: 80px;border: 1px solid #ddd">Documento</td>

                            </tr>
                        </thead>
                        <tbody id="qbody2"></tbody>
                    </table>

                    <p id="error_asi" style="color: red" ></p>
                </div>
            </div>

            <%-- Lista de Solicitudes de Ausentismo  --%>
            <div style="display: none">
                <div id="dcon" title="Lista de Solicitudes de Ausentismo de Trabajador">
                    <table style="margin-top: 20px;margin-bottom: 20px">
                        <tr>
                            <td>Trabajador&nbsp;&nbsp;</td>
                            <td id="trabajadorx" style="font-weight: bold"></td>
                            <td style="vertical-align: middle;padding-left: 50px" rowspan="2">
                                <input id="bcon" type="button" value="Consultar" onclick="bcon();"/>
                            </td>

                        </tr>
                        <tr>
                            <td>Peri&oacute;do</td>
                            <td>
                                <select id="periodo" style="width: 100px"></select>
                            </td>
                        </tr>
                    </table>
                    <table style="margin: auto;margin-top: 30px">
                        <tr>
                            <td style="vertical-align: top">
                                <table class="parainfo" style="width: 600px">
                                    <thead>
                                        <tr>
                                            <td style="width: 30px">&nbsp;</td>
                                            <td>&nbsp;</td>
                                            <td>Nro. Solicitud</td>
                                            <td>Fecha </td>
                                            <td>Hora </td>
                                            <td>Concepto</td>
                                            <td>Estado</td>
                                        </tr>
                                    </thead>
                                    <tbody id="qbody3"></tbody>
                                </table>
                            </td>

                            <td style="vertical-align: top">
                                <table class="crud">
                                    <tr>

                                        <td>
                                            <a href="#" onclick="jsConSol();" title="Consultar">
                                                <img src="../../images/find2.png"/></a>
                                        </td>
                                        <td>
                                            <a href="#" onclick="jsUpd();" title="Anular Solicitud">
                                                <img src="../../images/upd_est.png"/></a>
                                        </td>

                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <a href="#" onclick="jsExcel();" title="Exportar a Excel">
                                                <img src="../../images/excel.png"/></a>
                                        </td>

                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>

                    <p id="error_con" style="color: red"></p>
                </div>
            </div>

             <%-- Consulta de Solicitud de Ausentismo de trabajador --%>
            <div style="display: none">
                <div id="dconsol" title="Consulta de Solicitud de Ausentismo">
                    <table>
                        <tr>
                            <td>Trabajador</td>
                            <td>
                                <input type="text" id="trabajador_con" readonly="readonly"
                                       style="width: 300px"/>
                            </td>
                        </tr>
                        <tr>
                            <td>Concepto&nbsp;Ausentismo</td>
                            <td>
                                <input type="text" id="concepto_con" readonly="readonly"
                                       style="width: 300px"/>
                            </td>
                        </tr>
                        <tr>
                            <td>Tipo/Modalidad/Unidad</td>
                            <td>
                                <input type="text" id="tipomoda_con" readonly="readonly" 
                                       style="width: 300px"/>
                            </td>
                        </tr>
                        <tr>
                            <td>Fecha&nbsp;Ausentismo</td>
                            <td>
                                <input type="text" id="fecha_con" readonly="readonly" 
                                       style="width: 100px;margin-right:4px"/>
                            </td>
                        </tr>
                        <tr>
                            <td>Hora&nbsp;Inicio&nbsp;/&nbsp;Fin</td>
                            <td>
                                <input type="text" id="hora_ini_con" readonly="readonly" 
                                       style="width: 80px;margin-right:4px"/>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <input type="text" id="hora_fin_con" readonly="readonly" 
                                       style="width: 80px;margin-right:4px"/>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">&nbsp;</td>
                        </tr>
                        <tr>
                            <td colspan="2">Estados</td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <table class="parainfo" style="width: 100%">
                                    <thead>
                                        <tr>
                                            <td>Estado</td>
                                            <td>usuario</td>
                                            <td>Fecha</td>
                                            <td>Observación</td>
                                        </tr>
                                    </thead>
                                    <tbody id="qqbody"></tbody>
                                </table>
                            </td>
                        </tr>
                    </table>

                    <p id="error_con_sol" style="color: red"></p>
                </div>
            </div>
            
            <%-- Anular Solicitud de Ausentismo --%>
            <div style="display: none">
                <div id="dupd" title="Anular Solicitud de Ausentismo">
                  
                    <table>
                        <tr>
                            <td>Trabajador</td>
                            <td>
                                <input type="text" id="trabajador_upd" readonly="readonly"
                                       style="width: 300px"/>
                            </td>
                        </tr>
                        <tr>
                            <td>Fecha&nbsp;Ausentismo</td>
                            <td>
                                <input type="text" id="fecha_upd" readonly="readonly" 
                                       style="width: 100px"/>
                            </td>
                        </tr>
                        <tr>
                            <td>Hora&nbsp;Inicio&nbsp;/&nbsp;Fin</td>
                            <td>
                                <input type="text" id="hora_ini_upd" readonly="readonly" 
                                       style="width: 80px"/>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <input type="text" id="hora_fin_upd" readonly="readonly" 
                                       style="width: 80px"/>
                            </td>
                        </tr>
                        <tr>
                            <td>Estado&nbsp;Actual</td>
                            <td>
                                <input type="text" id="estado_actual_upd" readonly="readonly" 
                                       style="width: 100px"/>
                            </td>
                        </tr>
                        <tr>
                            <td>Estado</td>
                            <td>
                                <input type="text" id="estado_nuevo_upd" readonly="readonly" 
                                       style="width: 100px"/> después de Guardar datos.
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align: top">Observación</td>
                            <td>
                                <textarea id="observacion_upd" 
                                          style="width: 300px;height: 40px;resize: none"></textarea>
                            </td>
                        </tr>
                    </table>

                    <p id="error_upd" style="color: red"></p>
                </div>
            </div>
            
            <%-- para mensajes  --%>
            <div style="display: none">
                <div id="dmsg" title="Mensaje">
                    <p id="msg" style="text-align: center;color: #800;margin: 20px"></p>
                </div>
            </div>

        </div>

        <%-- para excel  --%>
  
         <form id="to_excel" action="AusentismoSolExc" target="_parent" method="post">
            <input type="hidden" id="data_excel" name="data_excel"/>
            <input type="hidden" id="trabajador_excel" name="trabajador_excel"/>
            <input type="hidden" id="periodo_excel" name="periodo_excel"/>
        </form>
        
    </body>
</html>

